<template>
    <div class="yunsuanBox">
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
            <el-row :gutter="20" style="margin-top:10px;">
                <el-col :span="24">
                    <el-form-item label="测点因子" prop="parentAreaId">
                        <el-tag class="hover" style="margin-right:10px;" v-for="(tag,index) in yinziListnew"
                            :key="tag.code" closable @close="handleClose(index)"
                            @click="processbtnClick(tag.code,tag.name,tag.place)">
                            {{ tag.code }}
                        </el-tag>
                    </el-form-item>
                    <el-form-item label="运算符号" prop="stationTypeName">
                        <el-button style="padding:20px;margin:10px 5px;" v-for="item in biaodaList" plain
                            @click="processbtnClick(item.sub)">
                            {{ item.name }}<br />
                            {{ item.sub }}
                        </el-button>
                    </el-form-item>
                </el-col>
                <p style="font-size:14px;margin-left:10px;">公式（请点击上方计算因子与运算符号填入公式）</p>
                <el-col :span="24">
                    <el-form-item label="" prop="stationTypeName">
                        <div class="fbc w100">
                            <el-input disabled style="width:98%;" :rows="3" id="textarea" type="textarea"
                                v-model="state.formData.expression" placeholder="请输入">
                            </el-input>
                            <span style="white-space: pre-wrap;display:inline-block
                                ;background: rgba(0, 186, 173, 1);
                                border-radius: 0px 2px, 2px, 0px;
                                color:#fff;writing-mode: vertical-rl;
                                padding:10px;
                                cursor: pointer;
                                " @click="yanzheng">验证公式</span>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import {
        ElMessage
    } from "element-plus";
    import _ from 'lodash'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const emits = defineEmits()
    const props = defineProps({
        xiugaiPointList: {
            type: Array,
            default: () => {
                return []
            }
        },
        yinziList: {
            type: Array,
            default: () => {
                return []
            }
        },
        expression: {
            type: String,
            default: () => ''
        },
        jiaoyan: {
            type: String,
            default: () => undefined
        },
        editId: {
            type: String,
            default: () => ''
        },
        biaodaList: {
            type: Array,
            default: () => {
                return [{
                        name: '加',
                        sub: '+'
                    }, {
                        name: '减',
                        sub: '-'
                    }, {
                        name: '乘',
                        sub: '*'
                    }, {
                        name: '除',
                        sub: '/'
                    }, {
                        name: '左括号',
                        sub: '('
                    }, {
                        name: '右括号',
                        sub: ')'
                    }, {
                        name: '与',
                        sub: '&&'
                    }, {
                        name: '或',
                        sub: '||'
                    }, {
                        name: '等于',
                        sub: '=='
                    }, {
                        name: '大于',
                        sub: '>'
                    }, {
                        name: '大于等于',
                        sub: '>='
                    },
                    {
                        name: '小于',
                        sub: '<'
                    }, {
                        name: '小于等于',
                        sub: '<='
                    }, {
                        name: '撤',
                        sub: '销'
                    }, {
                        name: '清',
                        sub: '空'
                    }
                ]
            }
        },
    })
    // 重点
    const state = reactive({
        biaodaList: [{
                name: '加',
                sub: '+'
            }, {
                name: '减',
                sub: '-'
            }, {
                name: '乘',
                sub: '*'
            }, {
                name: '除',
                sub: '/'
            }, {
                name: '左括号',
                sub: '('
            }, {
                name: '右括号',
                sub: ')'
            }, {
                name: '与',
                sub: '&&'
            }, {
                name: '或',
                sub: '||'
            }, {
                name: '等于',
                sub: '=='
            }, {
                name: '大于',
                sub: '>'
            }, {
                name: '大于等于',
                sub: '>='
            },
            {
                name: '小于',
                sub: '<'
            }, {
                name: '小于等于',
                sub: '<='
            }, {
                name: '清',
                sub: '空'
            }
        ],
        formData: {},
        rules: {},
        pointDtoList: [],
        quashList: [], //存撤销数据
        indexRef: 0
    })
    const yinziListnew = computed(() => {
        return _.uniqBy(props.yinziList,'code')
    })

    function handleClose(index) {
        props.yinziList.splice(index, 1)
    }

    function processbtnClick(myValue, type, place) {
        if (type) {
            if (!state.formData.nameDtoList) {
                state.formData.nameDtoList = []
            }
            state.formData.nameDtoList.push({
                name: type,
                code: myValue,
                place: place,
                marker: false
            })
            emits('threeStep', {
                expression: state.formData.expression,
                pointDtoList: state.formData.nameDtoList
            })
        }
        if (myValue != '空' && myValue != '销') {
            const myField = document.querySelector('#textarea')
            var startPos = myField.selectionStart
            var endPos = myField.selectionEnd
            state.formData.expression = myField.value.substring(0, startPos) + myValue +
                myField.value.substring(endPos,
                    myField.value
                    .length)
            state.quashList.length = state.indexRef + 1
            state.quashList.push(state.formData.expression)
            state.indexRef++
            nextTick(() => {
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            })
        } else if (myValue == '空') {
            state.formData.expression = ''
            state.quashList.push('')
            state.indexRef = 1
        } else if (myValue == '销') {
            state.indexRef--
            state.formData.expression = state.quashList[state.indexRef];
        }
        emits('threeStep', {
            expression: state.formData.expression,
            pointDtoList: state.formData.nameDtoList
        })
    }

    function yanzheng() {
        axios.post(props.jiaoyan ? props.jiaoyan : '/combination/checkExpression', {
            expression: state.formData.expression,
            pointDtoList: state.formData.nameDtoList,
            pointList: state.formData.nameDtoList.length > 0 ?
                state.formData.nameDtoList.map(item => {
                    return item.code
                }) : []
        }).then(res => {
            if (res.code == 200) {
                let data = {
                    expression: state.formData.expression,
                    pointDtoList: state.formData.nameDtoList
                }
                ElMessage.success(res.data)
                emits('threeStep', data)
            }
        })
    }
    if (yinziListnew.value.length > 0) {
        state.formData.nameDtoList = yinziListnew.value.map(item => {
            return {
                name: item.name,
                code: item.code,
                place: item.place,
                marker: false
            }
        })
    }
    watchEffect(() => {
        if(props.jiaoyan=='gasProtrusionAlarm/checkExpression'){
            if(props.xiugaiPointList.length>0){
                state.formData.nameDtoList = props.yinziList
            }
        }
        state.formData.expression = props.expression
        state.quashList = [props.expression]
    })
</script>
<style lang="scss" scoped>
    .yunsuanBox {
        margin: 10px;
    }

    :deep(.el-textarea.is-disabled .el-textarea__inner) {
        color: #333;
    }
</style>